function waterfull() {
    let container = document.getElementById("con");
    let items = document.getElementsByClassName("item");

    let width = items[0].offsetWidth;
    let clientWidth = document.documentElement.clientWidth;
    let columnCount = Math.floor(clientWidth / width);

    container.style.width = columnCount * width + 'px';
    let hrr = [];
    for (let i = 0; i < items.length; i++) {
        if (i < columnCount) {
            items[i].style.top = "0px";
            items[i].style.left = i * width + "px";
            hrr.push(items[i].offsetHeight);
        } else {
            let min = Math.min(...hrr);
            let index = hrr.indexOf(min);

            items[i].style.top = min + "px";
            items[i].style.left = index * width + "px";

            hrr[index] += items[i].offsetHeight;
        }
    }
}

window.onload = function(){
    waterfull();
}
window.onresize = function(){
    waterfull();
}